<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<link rel="stylesheet" type="text/css" href="css/Teacher/TeachersignIn.css" />
	</head>
	<style type="text/css">
		@media only screen and (min-width: 100px) and (max-width: 370px) {
			body > form > ul > li{
	position: relative;
	width: 18.2%;
	height: 4rem;
	border: 1px solid #D4D4D4;
	display: inline-block;
}
		}
	</style>
	<body>

		<a href="index.html" id="home" style="bottom: 6rem;">
			<img src="img/index/home.png" />
		</a>
		<p>每日签到</p>
		<form action="" method="post">
			<ul>
				<li>
					<p>刘强东</p>
					<select name="" onchange="qd(this)">
						<option value="a">出勤</option>
						<option value="b">病假</option>
						<option value="c">事假</option>
						<option value="d">其他</option>
					</select>
					<img src="img/Teacher/zy.png" class="a" />
					<img src="img/Teacher/b.png" class="b" />
					<img src="img/Teacher/s.png" class="c" />
					<img src="img/Teacher/q.png" class="d" />
				</li>
				<li>
					<p>刘强东</p>
					<select name="" onchange="qd(this)">
						<option value="a">出勤</option>
						<option value="b">病假</option>
						<option value="c">事假</option>
						<option value="d">其他</option>
					</select>
					<img src="img/Teacher/zy.png" class="a" />
					<img src="img/Teacher/b.png" class="b" />
					<img src="img/Teacher/s.png" class="c" />
					<img src="img/Teacher/q.png" class="d" />
				</li>
				<li>
					<p>刘强东</p>
					<select name="" onchange="qd(this)">
						<option value="a">出勤</option>
						<option value="b">病假</option>
						<option value="c">事假</option>
						<option value="d">其他</option>
					</select>
					<img src="img/Teacher/zy.png" class="a" />
					<img src="img/Teacher/b.png" class="b" />
					<img src="img/Teacher/s.png" class="c" />
					<img src="img/Teacher/q.png" class="d" />
				</li>
				<li>
					<p>刘强东</p>
					<select name="" onchange="qd(this)">
						<option value="a">出勤</option>
						<option value="b">病假</option>
						<option value="c">事假</option>
						<option value="d">其他</option>
					</select>
					<img src="img/Teacher/zy.png" class="a" />
					<img src="img/Teacher/b.png" class="b" />
					<img src="img/Teacher/s.png" class="c" />
					<img src="img/Teacher/q.png" class="d" />
				</li>
				<li>
					<p>刘强东</p>
					<select name="" onchange="qd(this)">
						<option value="a">出勤</option>
						<option value="b">病假</option>
						<option value="c">事假</option>
						<option value="d">其他</option>
					</select>
					<img src="img/Teacher/zy.png" class="a" />
					<img src="img/Teacher/b.png" class="b" />
					<img src="img/Teacher/s.png" class="c" />
					<img src="img/Teacher/q.png" class="d" />
				</li>
				<li>
					<p>刘强东</p>
					<select name="" onchange="qd(this)">
						<option value="a">出勤</option>
						<option value="b">病假</option>
						<option value="c">事假</option>
						<option value="d">其他</option>
					</select>
					<img src="img/Teacher/zy.png" class="a" />
					<img src="img/Teacher/b.png" class="b" />
					<img src="img/Teacher/s.png" class="c" />
					<img src="img/Teacher/q.png" class="d" />
				</li>
				<li>
					<p>刘强东</p>
					<select name="" onchange="qd(this)">
						<option value="a">出勤</option>
						<option value="b">病假</option>
						<option value="c">事假</option>
						<option value="d">其他</option>
					</select>
					<img src="img/Teacher/zy.png" class="a" />
					<img src="img/Teacher/b.png" class="b" />
					<img src="img/Teacher/s.png" class="c" />
					<img src="img/Teacher/q.png" class="d" />
				</li>
				<li>
					<p>刘强东</p>
					<select name="" onchange="qd(this)">
						<option value="a">出勤</option>
						<option value="b">病假</option>
						<option value="c">事假</option>
						<option value="d">其他</option>
					</select>
					<img src="img/Teacher/zy.png" class="a" />
					<img src="img/Teacher/b.png" class="b" />
					<img src="img/Teacher/s.png" class="c" />
					<img src="img/Teacher/q.png" class="d" />
				</li>
				<li>
					<p>刘强东</p>
					<select name="" onchange="qd(this)">
						<option value="a">出勤</option>
						<option value="b">病假</option>
						<option value="c">事假</option>
						<option value="d">其他</option>
					</select>
					<img src="img/Teacher/zy.png" class="a" />
					<img src="img/Teacher/b.png" class="b" />
					<img src="img/Teacher/s.png" class="c" />
					<img src="img/Teacher/q.png" class="d" />
				</li>
				<li>
					<p>刘强东</p>
					<select name="" onchange="qd(this)">
						<option value="a">出勤</option>
						<option value="b">病假</option>
						<option value="c">事假</option>
						<option value="d">其他</option>
					</select>
					<img src="img/Teacher/zy.png" class="a" />
					<img src="img/Teacher/b.png" class="b" />
					<img src="img/Teacher/s.png" class="c" />
					<img src="img/Teacher/q.png" class="d" />
				</li>
				<div><span>注：</span><img src="img/Teacher/zy.png" /><span>宝宝出勤</span><img src="img/Teacher/zg.png" /><span>宝宝缺勤</span></div>

			</ul>
			<input type="submit" value="提&nbsp;交" />
		</form>

	</body>
	<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/font.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function qd(obj) {
			if($("option:selected", obj).val() == "a") {
				console.log("1");
				$(obj).parent().children("img.a").show();
				$(obj).parent().children("img.b,img.c,img.d").hide();
			}
			if($("option:selected", obj).val() == "b") {
				console.log("2");
				$(obj).parent().children("img.b").show();
				$(obj).parent().children("img.a,img.c,img.d").hide();
			}
			if($("option:selected", obj).val() == "c") {
				console.log("3");
				$(obj).parent().children("img.c").show();
				$(obj).parent().children("img.b,img.a,img.d").hide();
			}
			if($("option:selected", obj).val() == "d") {
				console.log("4");
				$(obj).parent().children("img.d").show();
				$(obj).parent().children("img.b,img.c,img.a").hide();
			}
		}
	</script>

</html>